{% extends '_admin.html' %}
{% import 'public.html' as public %}


{% block main_contain %}
<div class="row" id="DataManager">
    <div class="col-4">
        <div class="card card-primary">
          <div class="card-header">
            <h3 class="card-title">網絡設置</h3>
          </div>
          <!-- /.card-header -->
          <form class="form-horizontal" id="ModifyForm">
            <div class="card-body">
              <div v-for="(val, key) in ModifyData" class="row justify-content-center">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="width: 6em;">{[ ColumnName[key] ]}</span>
                  </div>
                  <select v-if="key=='ifname'" v-model="ModifyData[key]" class="form-control" :name="key" @change="select_interface">
                    <option v-for="i in Interfaces" :value="i.ifname">{[i.ifname]}</option>
                  </select>
                  <select v-else-if="key=='method'" v-model="ModifyData[key]" class="form-control" :name="key">
                    <option v-for="i in NetworkMethods" :value="i.value">{[i.name]}</option>
                  </select>
                  <input v-else-if="['ssid','password'].includes(key)" v-model="ModifyData[key]" type="text" class="form-control" :name="key" 
                  :readonly="ModifyData.type=='wifi'?false:'readonly'">
                  <input v-else v-model="ModifyData[key]" type="text" class="form-control" :name="key" 
                  :readonly="['mac','state','type'].includes(key)?'readonly':false">
                </div>
              </div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer text-center">
              <button type="submit" class="btn btn-info">保存設定</button>
            </div>
            <!-- /.card-footer -->
          </form>
        </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 数据管理
    var DataManager = new Vue({
        el: '#DataManager',
        delimiters: ['{[', ']}'],
        data: {
          ModifyData: {
            ifname: '',
            mac: '',
            state: '',
            type: '',
            method: '',
            addresses: '',
            gateway: '',
            dns: '',
            ssid: '',
            password: '',
          },
          ColumnName: JSON.parse('{{ ColumnName|safe }}'),
          Interfaces: JSON.parse('{{ InterFacesInfo|safe }}'),
          NetworkMethods:[{value:'auto',name:'自動獲取'},{value:'manual',name:'靜態設置'}]
        },
        methods:{
          // 默认网卡
          default__interface(){
            let intface=this.Interfaces[0]
            for(key in this.ModifyData){this.ModifyData[key]=intface[key]}
          },
          // 选择网卡
          select_interface(){
            this.Interfaces.forEach(interfa=>{
              if(this.ModifyData.ifname==interfa.ifname){for(key in this.ModifyData){this.ModifyData[key]=interfa[key]}}
            })
          },
          // 提交表单
          commit_settings(){
            axios.post("{{ url_for('server.network') }}", {Modify: this.ModifyData})
            .then(response => {
                if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){setTimeout("window.location.reload()", 2000)}
                }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
            })
            .catch(function (error) {alert(error)})
          }
        },
        mounted: function(){
            // 校验
            $('#ModifyForm').validate({
                rules: {
                  addresses: {required: true},
                  gateway: {required: true},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-8').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                // 提交
                submitHandler: function (){
                  ServerSetting.commit_settings()
                },
            });
        }
    });
    // 加载默认数据
    DataManager.default__interface()
</script>
{% endblock %}


